<template>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <!-- <div class="swiper-slide">
                <img src="../../assets/img/banner1.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="../../assets/img/banner2.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="../../assets/img/banner3.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="../../assets/img/banner4.jpg" alt="">
            </div> -->
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination">
        </div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</template>
<script>
    import Swiper from 'swiper';
    export default{
        mounted(){
            var mySwiper = new Swiper ('.swiper-container', {
                loop: true,
                autoResize:true,
                pagination:'.banner .swiper-pagination',
                paginationClickable :true,
                autoplay : {
                    delay:10000
                },
                // 如果需要分页器
                pagination: {
                  el: '.swiper-pagination',
                  type: 'bullets',
                  bulletElement : 'li'
                },
                // 如果需要前进后退按钮
                navigation: {
                  nextEl: '.swiper-button-next',
                  prevEl: '.swiper-button-prev',
                }
            })
        }
    }
</script>
<style scoped>
@import url('swiper/dist/css/swiper.css');
 .swiper-container {
    width: 1200px;
    height: 460px;
    margin: 20px auto;
}
.swiper-pagination-bullet{
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: red;
}
.swiper-slide{
    width: 1200px;
    height: 460px;
}
.swiper-slide img{
    width: 1200px;
    height: 460px;
}
</style>
